<template>
    <div class="payment" v-if="payList">
        <!-- 顶部开始 -->
        <div class="shopheader">
            <div class="back_div">
                <i class="icon-back" @click="$router.go(-1)" style="font-size:23px ;line-height: 44px;"></i>
                <div class="shopcenter">确认订单</div>

            </div>
        </div>
        <!-- 支付环境安全 -->
        <div class="payenviement">
            <img src="../assets/image/pay.png" alt="">
            <span>你在安全环境下购买，请放心支付</span>
        </div>
         <!-- 品质保障开始 -->
        <div class="brand">
            <div></div>
        </div>

        <!-- 商品地址 -->
        <div class="addressContent" @click="show = true" >
            <div class="addressMiddle2" v-if="!addressItem"><span>请添加收货地址</span></div>
            <div class="addressHeader" v-if="addressItem">
                <span v-if="addressItem.isDefault">默认</span>
                <i>{{addressItem.province}}{{addressItem.city}}{{addressItem.county}}</i>
            </div>
            <div class="addressMiddle" v-if="addressItem">
                <span>{{addressItem.addressDetail}}</span>
                <i class="iconfont icon-youjiantou"></i>
            </div>
            <div class="addressName" v-if="addressItem">
                 <span>{{addressItem.name}} {{addressItem.tel}}</span>
            </div>
        </div>

        <!-- 地址弹出层 -->
        <van-popup v-model="show" position="bottom" round  :style="{ height: '80%' }" >
            <div class="addressChoice">
                <div class="popupHeader">
                    <i class="icon-back"></i>
                    <span>选择地址</span>
                </div>
                <ul v-if="addressList">
                    <li v-for="(item,index) in addressList" :key="index">
                        <div class="input">
                            <input type="radio" name="address" :checked="chioceIndex == index" @click="checked(index)">
                        </div>
                        <div class="address-item">
                            <div class="item1">{{item.name}} {{item.tel}}</div>
                            <div class="item2">
                                <span v-show="item.isDefault">默认</span>
                                <i>{{item.province}}{{item.city}}{{item.county}}{{item.addressDetail}}</i>
                            </div>
                        </div>
                        <div class="address-white"></div>
                        <router-link :to='"/modifyAddress?id=" + index' tag="div" class="address-text">编辑</router-link>
                    </li>
                </ul>

                <!-- 收货地址为零 显示 -->
                <van-empty description="请添加收货地址" v-if="addressList.length == 0" />
                
                <div class="last-more">
                    ——没有更多了——
                </div>
                <div class="addressAdd">
                     <router-link to="/addMyAddress" tag="div">添加地址</router-link>
                </div>
            </div>
        </van-popup>

        <!-- 商品内容详情 -->
        <div class="productContent">
            <div class="product1" v-for="(item,index) in payList" :key="index">
                <div class="product1-header">
                    <span>有眼光!这件商品好评率高达99%</span>
                </div>
                <div class="product1-detail">
                    <div class="product1-left">
                        <img :src="payList[index].image" alt="">
                    </div>
                    <div class="product-right">
                        <div class="product-right-top">
                            <div>{{payList[index].productTitle}}</div>
                            <span>￥{{payList[index].minPrice}}</span>
                        </div>
                        <div class="product-right-middle">
                            <div>{{payList[index].color}},{{payList[index].size}}</div>
                            <span>×{{payList[index].num}}</span>
                        </div>
                        <div class="product-right-bottom">
                            <div><span>7天无理由退款</span></div>
                            <i><span>7天可换</span></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 商品结算 -->
        <div class="card__body">
            <div class="total-card">
                <span>商品金额</span>
                <span>￥{{total}}</span>
            </div>
            <div class="cell-card">
                <span>总运费</span>
                <span>￥5.00</span>
            </div>
        </div>


        <!-- 商品总价结算 -->
        <div class="product-total">
            <div class="totalPay">实付款<span>￥{{(total + 5).toFixed(2) }}</span></div>
            <div class="payText" @click="showDialog = true">在线支付</div>
        </div>

        <van-dialog v-model="showDialog" title="确定支付" show-cancel-button @confirm="addLocal" @cancel="waitLocal">
            <!-- <img src="https://img01.yzcdn.cn/vant/apple-3.jpg" /> -->
        </van-dialog>

        <div class="lastWhite">
        </div>
    </div>
</template>

<script>
    export default {
        name:"paymentView",
        props:["shopProductList"],
        data() {
            return {
                payList: [],   //当前购买订单的数组
                payTotalList:[],  //本地存储的已经购买的订单的数组
                show:false,  //地址弹出层按钮
                addressList:[],    //本地存储的地址数组
                chioceIndex:0,  //下标
                addressItem:null,   //支付界面的地址
                showDialog: false,  //订单确认 弹出层按钮
                waitTotalList:[]   //本地存储的待付款的订单的数组
            };
        },
        methods:{
            onAdd() {
              this.$toast('新增地址');
            },
            onEdit(item, index) {
              this.$toast('编辑地址:' + index + item);
            },
            // 生成新数组
            payTotal(){
                this.payList = this.shopProductList.filter(item => item.checked);
                // console.log(this.payList);
            },
            // 地址栏选择地址
            checked(index){
                this.chioceIndex = index,
                this.show = false;
                this.addressItem = this.addressList[index];
                // console.log(this.addressItem);
            },
            // 保存已经支付的订单数据到本地
            addLocal(){
                // this.payTotalList.push(this.payList)
                // 提交订单的数据
               for(var i = 0 ; i<this.payList.length;i++){
                // console.log(this.payList[i]);
                this.payTotalList.push(this.payList[i]);
                
               }

                // console.log(this.payTotalList);
                window.localStorage.setItem("payList",JSON.stringify(this.payTotalList));

                this.$emit("add-local");
                this.$router.push("/userInfo");

                this.$toast.success("支付成功");

                // if(window.localStorage.getItem("payList")){
                //     this.payTotalList = JSON.parse([window.localStorage.getItem("payList")]);
                //     this.payTotalList.push(this.payList);
                //     window.localStorage.setItem("payList",JSON.stringify([this.payTotalList]));

                //     console.log(JSON.parse([window.localStorage.getItem("payList")]));

                // }else{
                //      window.localStorage.setItem("payList",JSON.stringify([this.payList]));
                // }
            },
            waitLocal(){
                  // 提交订单的数据
               for(var i = 0 ; i<this.payList.length;i++){
                // console.log(this.payList[i]);
                this.waitTotalList.push(this.payList[i]);
                
               }

                console.log(this.waitTotalList,"取消支付订单");
                window.localStorage.setItem("waitList",JSON.stringify(this.waitTotalList));

                this.$emit("add-local");
                this.$router.push("/userInfo");

                this.$toast.fail("取消支付");
            }

        },
        computed:{
            // 计算总价的方法
             total(){
                  return this.payList.reduce((total,item)=>{
                      if(item.checked){
                          return total += item.minPrice * item.num;
                      }else{
                          return total;
                      }
                  },0)
              },
        },
        
        created(){
            // 渲染页面购买订单的数组 方法
            this.payTotal();
            // 已经支付的订单的数据
            if(window.localStorage.getItem("payList")){
                this.payTotalList = JSON.parse(window.localStorage.getItem("payList"));
            }
            // 未支付订单的数据
            if(window.localStorage.getItem("waitList")){
                this.waitTotalList = JSON.parse(window.localStorage.getItem("waitList"));
            }
            // 渲染地址
            if(window.localStorage.getItem("address")){
                this.addressList = JSON.parse(window.localStorage.getItem("address"));
                console.log(this.addressList);

                this.addressList.forEach(item =>{
                    if(item.isDefault){
                        this.addressItem = item
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.payment{
    background: #f3f4f5;
    height: 100%;

    // .van-popup {
    //     background-color: #f3f4f5;
    // }
    .addressChoice{
        height: 100%;
        width: 100%;
        display: flex;
        background-color: #f3f4f5;
        flex-direction: column;
        position: relative;
        .popupHeader{
            width: 100%;
            display: flex;
            justify-content: space-between;
            height: 48px;
            background-color: #fff;
            
            i{
                font-size: 23px;
                width:25px;
                height: 48px;
                line-height: 48px;
                margin:0 17px;
            }
            span{
                flex: 1;
                height: 48px;
                line-height: 48px;
                color: #232323;
                font-size: 18px;
                font-weight: bold;
                text-align: center;
                transform: translateX(-30px);
            }
        }
        ul{
            display: flex;
            flex-direction: column;
            width: 100%;
            padding: 0 10px;
            box-sizing: border-box;

            li{
                height: 100px;
                background-color: #fff;
                border-radius: 8px;
                display: flex;
                margin-top: 12px;
                align-items: center;
                padding: 13px;
                box-sizing: border-box;
                .input{
                    // height: 100px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 23px;
                    margin-right: 8px;
                    input{
                        margin: 0;
                        width: 20px;
                        height: 20px;
                    }
                }
                .address-item{
                    width: 239px;
                    display: flex;
                    flex-direction: column;
                    .item1{
                        white-space: pre-wrap;
                        font-size: 16px;
                        font-weight: bold;
                        margin-bottom: 14px;

                    }
                    .item2{
                        span{
                            display: inline-block;
                            background-color: #feedf1;
                            width: 36px;
                            height: 16px;
                            color: #f14972;
                            line-height: 14px;
                            text-align: center;
                            border-radius: 3px;
                            margin-right: 3px;
                        }
                        i{
                            color: #232323;
                            font-size: 13px;
                        }
                    }
                }
                .address-white{
                    width: 2px;
                    height: 36px;
                    background-color: #e7e7e7;
                    margin:0 14px;
                }
                .address-text{
                    font-size: 14px;
                    color: #585c64;
                }
            }
        }

        .last-more{
            width: 100%;
            font-size: 12px;
            color: #98989f;
            margin-top: 12px;
            text-align: center;
        }
        .addressAdd{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 375px;
            height: 65px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-top: 1px solid #dddddd;
            div{
                width: 344px;
                height: 44px;
                box-sizing: border-box;
                line-height: 42px;
                border: 1px solid #f03b67;
                color: #f03b67;
                font-size: 16px;
                text-align: center;
                border-radius: 8px;
            }
        }
    }


    .back_div{
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: flex-start;
        height: 44px;
        i{
            width: 56px;
            height: 44px;
            text-align: center;
            line-height: 44px;
            font-size: 23px;
        }
        .shopcenter{
            font-size: 18px;
            flex: 1;
            height: 44px;
            text-align: center;
            line-height: 44px;
            transform: translateX(-28px);
        }
    }
    .payenviement{
        background: #e8eaf4;
        padding: 6px 15px;
        height: 30px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        img{
            width: 12px;
            margin-right: 5px;
        }
        span{
            font-size: 12px;
            color:#585c64 ;
            line-height: 18px;
        }
    }

    .brand{
        margin-top: 10px;
        background: #f3f4f5;
        display: flex;
        align-items: center;
            width: 100%;
            height: 40px;
            box-sizing: border-box;
            padding: 0 8px 10px 8px;
            border-radius: 5px;
            overflow: hidden;
        div{
            width: 100%;
            height: 100%;
            background: url(../assets/image/shoppingcart.png)no-repeat center center/cover;

        }
    }
    .addressContent{
        width: 353px;
        // height: 115px;
        margin: 10px;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding:20px 15px;
        box-sizing: border-box;
        .addressHeader{
            width: 100%;
            height: 18px;
            span{
                width:38px ;
                height: 18px;
                background-color: #feedf1;
                border-radius: 5px;
                font-size: 12px;
                color: #f03b67;
                text-align: center;
                line-height: 18px;
                margin-right: 4px;

            }
            i{
                font-size: 14px;
            }
        }

        .addressMiddle,.addressMiddle2{
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 21px;
            align-items: center;
            span{
                font-size:16px ;
                font-weight: 550;
            }
            i{
                color: #585c64;
            }
        }
        .addressMiddle2{
            margin-top: 0px;
        }
        .addressName{
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 21px;
            align-items: center;
            span{
                 font-size:16px ;
                font-weight: 550;
            }
        }
    }
    
    .productContent{
        margin:10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .product1{
            margin-top:10px ;
            width: 355px;
            height: 136px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            // padding:20px 15px;
            box-sizing: border-box;
            .product1-header{
                background-color: #f6effe;
                height: 28px;
                width: 100%;
                padding-left: 10px;
                box-sizing: border-box;
                span{
                    font-size: 12px;
                    color: #7264d4;
                    line-height: 28px;
                }
            }
            .product1-detail{
                // width: 355px;
                width: 100%;
                height: 107px;
                padding: 17px 15px 30px;
                box-sizing: border-box;
                display: flex;
                background-color: #fff;

                .product1-left{
                    width: 64px;
                    height: 64px;
                    border: 1px solid #f3f4f5;
                    margin-right: 8px;
                    img{
                        width: 64px;
                    }
                }

                .product-right-top{
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    margin-bottom: 10px;
                    div{
                        width: 198px;
                        height: 14px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        font-size: 14px;
                        color: #232323;
                        margin-right: 8px;
                    }
                    span{
                        font-size: 14px;
                        color: #232323;
                        font-weight: 550;

                    }
                }

                .product-right-middle{
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    div{
                        font-size: 12px;
                        color: #999999;
                    }
                    span{
                        font-size: 12px;
                        color: #999999;
                    }
                }
            }
            .product-right-bottom{
                display: flex;
                margin-top:13px ;
                div{
                    width: 100px;
                    height: 16px;
                    line-height: 16px;
                    text-align: center;
                    background-color: #edf3ff;
                    margin-right: 3px;
                    border-radius: 5px;
                    span{
                        display: inline-block;
                        color: #627db6;
                        font-size: 12px;
                        transform: scale(0.9);
                    }
                }
                i{
                    width: 60px;
                    height: 16px;
                    line-height: 16px;
                    text-align: center;
                    background-color: #edf3ff;
                    margin-right: 3px;
                    border-radius: 5px;
                    span{
                        display: inline-block;
                        color: #627db6;
                        font-size: 12px;
                        transform: scale(0.9);
                    }
                }
            }
        }
    }
    .card__body{
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 17px 15px;
        height: 85px;
        box-sizing: border-box;
        background-color:#fff ;
        border-radius: 10px;
        div{
            display: flex;
            justify-content: space-between;
            width: 100%;
            font-size: 14px;
            color: #585c64;
            margin-bottom: 8px;
        }
    }
    .product-total{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 95px;
        border-top: 2px solid #e5e5e5;
        box-sizing: border-box;
        background-color: #fff;

        .totalPay{
            height: 40px;
            width: 100%;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            span{
                font-size: 16px;
                font-weight: 550;
                color: #f03b67;
                margin-left: 5px;
            }
        }

        .payText{
            width: 343px;
            height: 44px;
            border-radius: 5px;
            background-color: #f03b67;
            font-size: 18px;
            color: #fff;
            text-align: center;
            line-height: 44px;

        }

    }
    .lastWhite{
        width: 100%;
        height: 110px;
    }
}
</style>